<template>
<div id="containerTwo"></div>
</template>

<script>
import 'echarts-wordcloud'
  export default {
    watch: {
    },
    data() {
      return {
      }
    },
    mounted() {
      const data = [{
        name:'张飞',
        value: 100,
      },{
        name: '赵云',
        value: 200,
      },{
        name: '关羽',
        value: 300
      }]
      // 获取对象
      const chart = this.$echarts.init(document.getElementById("containerTwo"));
      chart.setOption({
        series: [
          {
            type: 'wordCloud',
            data,
            shape: 'circle',
            textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
              color: function () {
                // Random color随机色
                return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                ].join(',') + ')';
              }
            },
            emphasis: {
              focus: 'self',
              textStyle: {
                  shadowBlur: 10,
                  shadowColor: '#333'
              }
            },
          }
        ]
      })
    }
  }
</script>

<style lang="scss" scoped>
#containerTwo {
  width: 100%;
  height: 100%;
}
</style>
